@import '../global/variables.css';

:root,
:host {
  --ring-error-bubble-background-color: var(--ring-popup-background-color);
}

:global(.ring-ui-theme-dark) {
  --ring-error-bubble-background-color: var(--ring-secondary-background-color);
}

.errorBubblePopup {
  overflow: visible;

  margin-left: 2px;

  border: 0;

  box-shadow: none;
}

.errorBubbleWrapper {
  display: inline-block;
}

.errorBubble {
  box-sizing: border-box;
  min-height: calc(var(--ring-unit) * 4);
  padding: calc(var(--ring-unit) - 1px) calc(var(--ring-unit) * 1.5 - 1px);

  white-space: pre-wrap;

  color: var(--ring-error-color);

  border: 1px solid var(--ring-popup-border-color);
  border-radius: var(--ring-border-radius);

  background: var(--ring-error-bubble-background-color);
  box-shadow: var(--ring-popup-shadow);

  font-size: var(--ring-font-size-smaller);
  line-height: var(--ring-line-height-lowest);
}

.errorBubble::before {
  position: absolute;
  top: calc(var(--ring-unit) * 1.5);
  left: -4px;

  display: block;

  width: var(--ring-unit);
  height: var(--ring-unit);

  content: '';
  transform: rotate(45deg);

  border: 1px solid var(--ring-popup-border-color);
  border-top: 0;
  border-right: 0;
  background: var(--ring-error-bubble-background-color);
}
